<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<ul>
		<li>第1个列表</li>
		<li>第2个列表</li>
		<li>第3个列表</li>
		<li>第4个列表</li>
	</ul>
	<script>
		var lis = document.querySelectorAll('li');
		// for (var i = 0; i < lis.length; i++) {
		// 	lis[i].onclick = function () {
		// 		console.log(i)
		// 	}
		// }

		for (var i = 0; i < lis.length; i++) {
			lis[i].onclick = (function (i) {
				return function () {
					console.log(i + 1)
				}
			})(i)
		}

		for (let i = 0; i < lis.length; i++) {

			let i = 3;
			console.log(i)
			// lis[i].onclick = function () {
			// 	let i = 3;
			// 	console.log(i + 1)
			// }
		}




	</script>
</body>

</html>